<template>
  <div class="hk_video">
    <div :id="`divPlugin${g_iWndIndex}`" @click="toInspect" class="video_content"></div>
    <div class="set_info">
      <div class="name">{{ name }}</div>
      <span class="megaphone" v-if="isShow">
        <img v-if="inx === 1" @click="OpenSound" src="../assets/open.png" />
        <img v-else @click="CloseSound" src="../assets/stop.png" />
      </span>
      <div v-if="inx === 0" class="megaphone_open">
        <el-slider v-model="value"></el-slider>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {},
    iWndIndex: {},
  },
  data() {
    return {
      g_iWndIndex: this.iWndIndex,
      title: "加载中...",
      name: "",
      isLogin: false,
      value: 30,
      isShow: false,
      inx: 1, //小喇叭
    };
  },
  watch: {
    value(val) {
      this.setVolume();
    },
  },
  mounted() {
    const dom = document.getElementById(`divPlugin${this.g_iWndIndex}`);
    dom.click();
  },
  methods: {
    formatTooltip(val) {
      return val / 100;
    },
    //检测安装插件
    toInspect() {
      var _that = this;
      // 检查插件是否已经安装过
      if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
        alert("您还未安装过插件，双击开发包目录里的WebComponents.exe安装！");
        return;
      }
      // 初始化插件参数及插入插件
      WebVideoCtrl.I_InitPlugin(500, 300, {
        iWndowType: 2,
        cbSelWnd: function (xmlDoc) {
          _that.g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
        },
      });
      WebVideoCtrl.I_InsertOBJECTPlugin(`divPlugin${_that.g_iWndIndex}`);

      // 检查插件是否最新
      if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
        alert("检测到新的插件版本，双击开发包目录里的WebComponents.exe升级！");
        return;
      }
      WebVideoCtrl.I_ChangeWndNum(1);
      this.toLogin();
    },

    // 登录
    toLogin() {
      if (this.info) {
        let szIP = this.info.url;
        let szPort = this.info.port;
        let szUsername = this.info.user;
        let szPassword = this.info.pwd;
        if ("" == szIP || "" == szPort) {
          return;
        }
        var iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
          success: function (res) {
            // console.log("res", res);

            $("#ip").prepend("<option value='" + szIP + "'>" + szIP + "</option>");
            setTimeout(function () {
              $("#ip").val(szIP);
            }, 10);
          },
          error: function () {
            console.log("登录失败");
          },
        });
        this.isLogin = true;
        console.log("登录", iRet);

        if (-1 == iRet) {
          console.log("已登录过！");
          // 开始预览
          this.StartRealPlay();
        } else {
          setTimeout(() => {
            this.toLogin();
          }, 2000);
        }
      }
    },

    // // 开始预览
    StartRealPlay() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
        // szIP = $("#ip").val(),
        szIP = (szIP = this.info.url),
        iStreamType = parseInt($("#streamtype").val(), 10),
        iChannelID = parseInt($("#channels").val(), 10),
        // bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
        bZeroChannel = true,
        szInfo = "";

      if ("" == szIP) {
        return;
      }

      if (oWndInfo != null) {
        // 已经在播放了，先停止
        WebVideoCtrl.I_Stop();
      }

      var iRet = WebVideoCtrl.I_StartRealPlay(szIP, {
        iStreamType: iStreamType,
        iChannelID: iChannelID,
        bZeroChannel: bZeroChannel,
      });

      if (0 == iRet) {
        szInfo = "开始预览成功！";
      } else {
        szInfo = "开始预览失败！";
      }
      this.name = this.info.name;
      this.isShow = true;
      console.log("开始预览成功");
    },
    OpenSound() {
      this.inx = 0;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
        szInfo = "";

      if (oWndInfo != null) {
        var allWndInfo = WebVideoCtrl.I_GetWindowStatus();
        // 循环遍历所有窗口，如果有窗口打开了声音，先关闭
        for (var i = 0, iLen = allWndInfo.length; i < iLen; i++) {
          oWndInfo = allWndInfo[i];
          if (oWndInfo.bSound) {
            WebVideoCtrl.I_CloseSound(oWndInfo.iIndex);
            break;
          }
        }

        var iRet = WebVideoCtrl.I_OpenSound();

        if (0 == iRet) {
          szInfo = "打开声音成功！";
        } else {
          szInfo = "打开声音失败！";
        }
        console.log(szInfo);
      }
    },
    // 关闭声音
    CloseSound() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
        szInfo = "";

      if (oWndInfo != null) {
        var iRet = WebVideoCtrl.I_CloseSound();
        if (0 == iRet) {
          szInfo = "关闭声音成功！";
          this.inx = 1;
        } else {
          szInfo = "关闭声音失败！";
        }
        console.log(szInfo);
      }
    },
    // 设置音量
    setVolume() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
        iVolume = this.value,
        szInfo = "";

      if (oWndInfo != null) {
        var iRet = WebVideoCtrl.I_SetVolume(iVolume);
        if (0 == iRet) {
          szInfo = "音量设置成功！";
        } else {
          szInfo = "音量设置失败！";
        }
        console.log(szInfo);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.hk_video {
  height: 100%;
  width: 100%;
  position: relative;
  .video_content {
    box-sizing: border-box;
    height: 93%;
    width: 100%;
    border: 1px solid #000;
  }
  .set_info {
    color: #fff;
    width: 100%;
    font-size: 13px;
    position: absolute;
    bottom: 0;
    padding: 4px 0;
    // left: 6px;
    background-color: #000000;
    // background-color: pink;
    .megaphone {
      position: absolute;
      bottom: 4px;
      right: 3%;
      width: 3%;
      height: 66%;
      // background-color: green;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .megaphone_open {
      position: absolute;
      bottom: -8px;
      right: 9%;
      width: 70px;
    }
  }
}
</style>
